<template>
  <div class="log-detail">
    <el-descriptions title="操作日志详情" :column="1" border>
      <el-descriptions-item label="日志ID">{{ log.id }}</el-descriptions-item>
      <el-descriptions-item label="操作人ID">{{ log.operateEmpId }}</el-descriptions-item>
      <el-descriptions-item label="操作时间">{{
        formatDateTime(log.operateTime)
      }}</el-descriptions-item>
      <el-descriptions-item label="类名">{{ log.className }}</el-descriptions-item>
      <el-descriptions-item label="方法名">{{ log.methodName }}</el-descriptions-item>
      <el-descriptions-item label="耗时">
        <el-tag :type="getTimeTagType(log.costTime)"> {{ log.costTime }} ms </el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <div class="detail-section">
      <h3>方法参数</h3>
      <el-input type="textarea" :rows="5" :value="log.methodParams" readonly resize="none" />
    </div>

    <div class="detail-section">
      <h3>返回值</h3>
      <el-input type="textarea" :rows="8" :value="log.returnValue" readonly resize="none" />
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  log: {
    type: Object,
    required: true,
  },
})

// 日期格式化（同上）
const formatDateTime = (dateTime) => {
  /* ... */
}

// 耗时标签类型（同上）
const getTimeTagType = (time) => {
  /* ... */
}
</script>

<style scoped>
.log-detail {
  padding: 10px;
}

.detail-section {
  margin-top: 20px;
}

.detail-section h3 {
  margin-bottom: 10px;
  color: #606266;
}
</style>
